@import 'common_style.less';
@bodyWidth: 980px;
@baseColor: #ff4400;
@baseColorHover: #f52b00;
@baseLightColor: #fff1e2;
@baseGray: #222;
@baseBg: #e7e7e7;
.ajaxjs-msgbox () {
	.fadeIn (.8s);
	box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
	position: fixed;
	z-index: 99999999;
	margin: auto;
	.inner {
		margin: 5px;
		margin-top: 3%;
		padding: 10px;
		overflow: hidden;
	}

	.topCloseBtn {
		position: absolute;
		text-align: center;
		top: 5px;
		right: 0;
		width: 30px;
		line-height: 16px;
		height: 30px;
		color: #b5b5b5;
		font-size: 25px;
		cursor: pointer;
	}
}

.loadMoreBtn {
	width: 95%;
	max-width: 500px;
}

// 折叠菜单 Accordion Menu
.acMenu {
	& > li h3 {
		cursor: pointer;
	}

	.pressed {
		& > ul {
		}

		& h3 {
			color: black;
		}
	}

	& > li > ul {
		.transition (height .5s cubic-bezier(0, 1, 0.5, 1));
		overflow: hidden;
	}

	ul {
		height: 0;
	}
}

// 多选项卡（多标签页）
.base_tab {
	& > ul {
		& > li {
			background-color: @baseBg;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			cursor: pointer;
			position: relative;
			list-style: none;
			text-align: center;
			height: 35px;
			margin: 3px 0;
			padding: 8px;
			border: 1px solid transparent;
			&.selected {
				background-color: white;
				border-color: @baseColor;
				z-index: 999999;
			}

			&:hover {
				color: @baseColor;
			}
		}
	}

	& > div {
		position: relative;
		border: 1px solid @baseColor;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		z-index: 1;
		& > div {
			display: none;
			padding: 10px;
			font-size: .9rem;
			text-align: justify;
			&.selected {
				display: block;
			}
		}
	}
}

// 水平 Tab
.tab2 {
	.base_tab;
	& > ul {
		.giveHeight;
		& > li {
			display: block;
			float: left;
			margin-bottom: 0;
			margin-right: 1px;
			border-bottom: 0;
		}
	}

	& > div {
		margin-top: -1px;
	}
}

// 垂直 Tab
.tab3 {
	.base_tab;
	& > ul {
		width: 25%;
		float: left;
		& > li {
			margin-top: 0;
			border-right: 0;
		}
	}

	& > div {
		width: 75%;
		float: left;
		margin-left: -1px;
		min-height: 149px;
	}
}

// 滑动条
.slider {
	position: relative;
	width: 85%;
	height: 5px;
	border: 1px solid gray;
	margin: 15px auto;
	cursor: pointer;
	button.withAnimated {
		.transition (left 300ms ease);
	}

	button {
		position: absolute;
		height: 16px;
		width: 16px;
		background-color: gray;
		bottom: -110%;
	}
}

.scrollTab {
	overflow: hidden;
	header ul {
		overflow: hidden;
		li {
			float: left;
			text-align: center;
			cursor: pointer;
		}
	}

	& > div {
		white-space: nowrap;
		.fixTransitionFlash;
		.leftFx;
		transition: transform 400ms linear;
		& > div {
			white-space: normal;
			float: left;
			min-height: 10px;
		}
	}
}

// 广告滚动条组件
.banner {
	.scrollTab;
	position: relative;
	min-height: 140px;
	overflow: hidden;
	max-height: 280px;
	& > div > div img {
		width: 100%;
	}

	ol {
		background: rgba(0, 0, 0, .3);
		width: 100%;
		margin: 0;
		padding: 0;
		height: 18px;
		line-height: 25px;
		position: absolute;
		bottom: 0;
		left: 0;
		text-align: right;
		li {
			list-style-type: none;
			height: 5px;
			width: 5px;
			display: inline-block;
			margin: 6px 3px;
			color: white;
			text-indent: 99em;
			background: rgba(255, 255, 255, .5);
			cursor: pointer;
			&:last-child {
			}

			&.active {
				background: white;
			}
		}
	}
}

@media screen and (min-width: 330px) {
	.banner {
		max-height: 180px;
	}
}

@media screen and (min-width: 480px) {
	.banner {
		max-height: 280px;
	}
}

// 下拉菜单
// 父节点，通常是 li
.downdrop_menu_parentNode () {
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	&:hover {
		overflow: inherit;
	}

	.show () {
		height: 13rem;
		z-index: 9999999;
	}

	&:hover menu {
		.show ();
	}

	menu {
		margin: 0;
		z-index: 99999;
		box-sizing: border-box;
		overflow: hidden;
		position: absolute;
		.heightFx;
		height: 0;
		&:hover {
			.show ();
		}
	}
}

// 箭头 父容器必须 position: relative;
.aj-arrow {
	position: absolute;
	&:after , &:before {
		position: absolute;
		border: 5px solid transparent;
		content: ' ';
		height: 0;
		width: 0;
	}

	&.toTop {
		top: -1px;
		&:after {
			border-bottom-color: #fffce9;
			bottom: -1px;
		}

		&:before {
			border-bottom-color: #ffcc9e;
			bottom: 0;
		}
	}

	&.toBottom {
		bottom: -8px;
		&:after {
			border-top-color: #fffce9;
			bottom: -1px;
		}

		&:before {
			border-top-color: #ffcc9e;
			bottom: -2px;
		}
	}

	&.toLeft {
		left: -9px;
		&:after {
			top: 5px;
			border-right-color: #fffce9;
		}

		&:before {
			border-right-color: #ffcc9e;
			top: 5px;
			left: -2px;
		}
	}

	&.toRight {
		right: 0;
		&:after {
			top: 5px;
			border-left-color: #fffce9;
		}

		&:before {
			border-left-color: red;
			top: 5px;
		}
	}
}

.tipsNote {
	line-height: 20px;
	color: #ff865d;
	border: solid 1px #ffcc9e;
	background-color: #fffce9;
	padding: 8px 12px;
	width: 70%;
	border-radius: 3px;
	margin-top: 10px;
	font-size: .8rem;
	box-sizing: border-box;
	position: relative;
	text-align: left;
}

.single_tips , .tipsNote2 {
	position: fixed;
	background-color: #f5faff;
	border: 1px solid #0066cc;
	font-size: .9rem;
	border-radius: 3px;
	color: #0066cc;
	padding: 7px 12px 8px 12px;
	margin-left: 10px;
	.aj-arrow:after {
		border-right-color: #f5faff;
	}

	.aj-arrow:before {
		border-right-color: #0066cc;
	}
}

.ajaxjs-form {
	@media screen and (max-width: 480px) {
		dt {
			width: 40%! important;
			float: initial ! important;
		}
	}

	dl {
		overflow: hidden;
		dd , dt {
			float: left;
			margin-bottom: 2%;
		}

		dt {
			width: 30%;
			span {
				color: red;
			}
		}

		dd {
			width: 70%;
			.tips , .state {
				display: none;
				margin-left: 10px;
				border: 1px solid gray;
				padding: 3px 3px;
				position: relative;
				strong {
					border-style: solid;
					height: 0;
					line-height: 0;
					width: 0;
					font-size: 0;
					position: absolute;
					border-width: 5px;
					&.arrow_1 {
						left: -11px;
						top: 7px;
						border-color: white gray white white;
					}

					&.arrow_2 {
						left: -9px;
						top: 7px;
						border-color: transparent white transparent transparent;
					}
				}
			}

			.state {
				color: red;
				font-weight: bold;
			}

			.errHighlight {
				border-color: red ! important;
				color: red;
			}
		}
	}

	input[type=text] , input[type=password] , textarea {
		width: 100%;
		&:focus {
			border-color: #21a9ff ! important;
		}
	}

	input[type=submit] , input[type=file] {
		cursor: pointer;
	}

	input[type="checkbox"] , input[type="radio"] {
		vertical-align: middle;
	}

	select {
		.ajaxjs-select;
	}
}

// 表单验证
.errMsg_Box , .tipsMsg_Box {
	min-width: 120px;
	padding: 5px;
	position: absolute;
	border: 1px solid gray;
	font-size: 9pt;
	text-align: center;
	padding-left: 25px;
	transition: opacity .8s ease-in-out;
	-webkit-transition: opacity .8s ease-in-out;
	z-index: 999999999;
	background-color: white ! important;
	.arrow {
		background-image: url();
		background-repeat: no-repeat;
		width: 18px;
		height: 10px;
		position: absolute;
		left: 15px;
		bottom: -10px;
	}

	&.msgIcon {
		background-position: 6px 5px;
	}

	&.disallowIcon {
		background-position: 6px 5px;
	}
}

.disallowStateIcon {
	display: none;
}

.errState {
	position: relative;
	input {
		border: red 1px solid ! important;
	}

	.disallowStateIcon {
		background-repeat: no-repeat;
		width: 18px;
		height: 18px;
		position: absolute;
		display: block;
		z-index: 9999999;
		top: 5px;
		right: 16px;
	}
}

// 图文单列
.column_1 () {
	li {
		clear: both;
		border-bottom: 1px solid lightgray;
		padding: 2% 0;
		margin: 0 2%;
		overflow: hidden;
		list-style-type: none;
		a {
			display: block;
			text-decoration: none;
			color: #2badea;
		}
	}

	.imgHolder {
		float: left;
		width: 30%;
	}

	h4 {
		margin: 0;
		font-size: 1.05rem;
		line-height: 120%;
		white-space: normal;
		letter-spacing: 2px;
		&:hover {
		}
	}

	h4 , p {
		margin-left: 32%;
		font-weight: normal;
	}

	p {
		font-size: .9rem;
		color: gray;
		margin-bottom: 0;
	}

	.date {
		text-align: right;
		color: gray;
	}
}

// 双列、三列两者公共基类，不能直接使用，应要被 mixin
.column_2_3_base () {
	clear: both;
	overflow: hidden;
	margin-top: 5px;
	li {
		float: left;
		a {
			text-decoration: none;
		}

		.box {
		}

		h4 {
			font-weight: normal;
			font-size: 1rem;
			padding: 5px 0;
			letter-spacing: 2px;
			color: #2badea;
		}
	}
}

.column_2 {
	.column_2_3_base ();
	li {
		width: 48%;
		&:nth-of-type(odd) {
			margin-left: 1.3%;
			margin-right: 1.3%;
		}

		&:nth-of-type(even) {
			margin-right: 1.4%;
		}
	}
}

.column_3 () {
	.column_2_3_base ();
	padding-left: 1%;
	li {
		width: 33.3%;
		.box {
			width: 98%;
		}
	}
}

// 图片容器
.imgHolder {
	position: relative;
	overflow: hidden;
	min-height: 70px;
	background: no-repeat center top url('');
	background-size: 110% 80%;
	img {
		width: 100%;
		.imgOpacityShow;
		.fixTransitionFlash;
		opacity: 0;
		&.tran {
			opacity: 1;
		}
	}

	.icon {
		position: absolute;
		opacity: .7;
		bottom: 6px;
		right: 2px;
		border-radius: 4px;
		margin-right: 3px;
		margin-left: 1px;
		width: 32px;
		height: 32px;
	}
}

// 加载图片失败时
.noImg {
}

